const name = 'grimm-searchbar'
export default {
  name,
  props: {
    className: {
      default: name
    },
    placeholder: {
      type: [String, Number, Boolean],
      default: name
    },
    icon: {
      type: String,
      default: ''
    },
    cancelBtn: {
      type: [String, Number],
      default: ''
    },
    searchBtn: {
      type: [String, Number],
      default: ''
    },
    empty: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number, Boolean],
    },
    onChange: {
      type: Function,
      default: _ => _
    },
  },
  computed: {
    element () {
      return 'input'
    }
  },
  render(h) {
    const children2 = [
      h('span', {
        'class': 'iconfont search'
      }),
      h('grimm-input', {
        props: {
          placeholder: this.placeholder,
          value: this.value
        },
        on: {
          input: (value) => {
            try {
              this.onChange(value)
            } finally {
              this.$emit('input', value)
            }
          }
        }
      })
    ]
    if (this.empty && this.value) {
      children2.push(h('span', {
        'class': 'iconfont error-full',
        on: {
          click: () => {
            try {
              this.$emit('input', '')
              this.$emit('cancel')
            } catch (error) {
              console.log(error)
            }
          }
        }
      }))
    }
    const children = [
      h('div', {
        'class': `${name}-content`
      }, children2)
    ]
    if (this.icon) {
      children.unshift(h('span', {
        'class': `iconfont ${this.icon}`,
        on: {
          click: () => {
            try {
              this.$emit('back')
            } catch (error) {
              console.log(error)
            }
          }
        }
      }))
    }
    if (this.cancelBtn) {
      children.push(h('span', {
        'class': `${name}-cancel`,
        on: {
          click: () => {
            try {
              this.$emit('input', '')
              this.$emit('cancel')
            } catch (error) {
              console.log(error)
            }
          }
        }
      }, this.cancelBtn))
    }
    if (this.searchBtn) {
      children.push(h('span', {
        'class': `${name}-searchBtn`,
        on: {
          click: () => {
            try {
              this.$emit('search')
            } catch (error) {
              console.log(error)
            }
          }
        }
      }, this.searchBtn))
    }
    return h('div', {
      'class': name
    }, children)
  }
}
